<template>
    <Banner></Banner>
    <!-- 内容 -->
    <main>
        <div class="left">
            <!-- 热门推荐 -->
            <Suspense>
                <template #default>
                    <Hot></Hot>
                </template>
                <template #fallback>
                    <loading></loading>
                </template>
            </Suspense>

            <!-- 榜单 -->
            <List></List>
        </div>
        <div class="right">
            <Singer></Singer>
            <HotAnchorVue></HotAnchorVue> 
        </div>
    </main> 

    <!-- footer -->
    <UserFooter></UserFooter>
</template>

    <UserFooter></UserFooter>
<script setup>
    import { defineAsyncComponent, ref } from 'vue';
    import Banner from './Banner.vue';
    import List from './List.vue'
    import HotAnchorVue from './HotAnchor.vue';
    import Singer from './Singer.vue';
    const Hot = defineAsyncComponent(() => import('./Hot.vue'));

</script>

<style lang="less" scoped>
    main{
        width: 980px;
        margin: 0 auto;
        transform: translateX(-1px);
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        display: flex; 
        .left{
            flex-grow: 1;
            padding: 20px;
        }

        // .right{
        //     flex-shrink: 0;
        //     padding: 20px;
        //     width: 220px;
        // }
    } 

</style>